iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
2

這次的文章可以說是JavaScript中,陣列相關操作函式大全了,總共有20個函式,就請準備筆記本好好記錄下吧!/images/emoticon/emoticon33.gif

1. 合併陣列 - concat()

其實字串也可以用這個方法,但連結字串建議用" + ",效能較好
範例:

let array1 = [1, 2, 3];
let array2 = [4, 5];

console.log(array1.concat(array2));
// output: [1, 2, 3, 4, 5];

2. 增加陣列多個元素 - push()

在陣列末端增加多個元素
範例:

let array1 = [1, 2, 3];
array1.push(4, 5);
console.log(array1);
// output: [1, 2, 3, 4, 5];

3. 從陣列開頭增加陣列多個元素 - unshift()

和push()不同,是從頭新增元素
範例:

let array1 = [1, 2, 3];
array1.unshift(4, 5);
console.log(array1);
// output: [4, 5, 1, 2, 3];

4. 移除陣列最後一個元素 - pop()

範例:

let array1 = [1, 2, 3];
array1.pop();
console.log(array1);
// output: [1, 2]

5. 移除陣列第一個元素 - shift()

範例:

let array1 = [1, 2, 3];
array1.shift();
console.log(array1);
// output: [2, 3]

6. 同時新增及刪除元素 - splice(startIndex, deleteCount, addItem, …)

第一個參數是要改動陣列元素的元素索引,第二個參數是刪除元素數目,第三個參數之後便是要新增的元素
範例:

let array1 = ['1', '2', '3'];
array1.splice(1, 2, '4', '5');
console.log(array1);
// output: ['1', '4', '5']

7. 將陣列中所有的元素連接成一個字串,並回傳此字串 - join(separator)

若唯一參數為空白,則會為元素之間加上','
範例:

let array1 = ['1', '2', '3'];

console.log(array1.join());
// output: 1,2,3

console.log(array1.join(''));
// output: 123

console.log(array1.join('-'));
// output: 1-2-3

8. 將陣列內的每個元素,皆傳入並執行給定的函式一次 - forEach(function(value, index, array){})

第一個參數是目前被處理中的元素,第二個參數是被處理中的元素之索引,第三個參數是指.forEach()方法前的那個陣列

let array1 = [1, 2, 3];

array1.forEach(function(element) {
  console.log(element);
});

// output: 1
// output: 2
// output: 3

9. 將陣列內的每個元素,皆傳入並執行給定的函式一次 - map(function(value, index, array){})

和forEach()非常地像,不過map可以將全部元素遍歷後產生一個新陣列
範例:

let array1 = [1, 2, 3];
let array2 = array1.map(x => x * 2);

console.log(array2);
// output: [2, 4, 6]

10. 陣列數字加總 - reduce(accumulator, currentValue)

第一個參數是目前陣列元素累加的總數,第二個參數是目前被處理的元素
範例:

let array1 = [1, 2, 3];
let total = array1.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(total);
// output: 6

11. 將一個陣列的所有元素進行排序,並回傳此陣列 - sort()

範例:

let array1 = [3, 1, 2, 5, 4];
array1.sort();

console.log(array1);
// output: [1, 2, 3, 4, 5]

12. 將陣列元素反轉 - reverse()

範例:

let array1 = [1, 2, 3];
console.log(array1.reverse());
// output: [3, 2, 1]

13. 將陣列元素傳入函式做過濾 - filter(function(element, index, array){})

第一個參數是目前被處理中的元素,第二個參數是被處理中的元素之索引,第三個參數是指.filter()方法前的那個陣列,也就是呼叫filter的陣列
範例:

let array1 = [1, 2, 3, 4];
let result = array1.filter(element => element > 2);

console.log(result);
// output: [3, 4]

14. 回傳第一個滿足所提供之測試函式的元素值 - find(function(element, index, array){})

範例:

let array1 = [2, 1, 5, 3, 4];
let found = array1.find((element) => element > 4);

console.log(found);
// expected output: 5

15. 判斷陣列元素是否都通過函式設定的條件,會回傳true or false - every(function(){})

範例:

let array1 = [1, 2, 3, 4, 5];

console.log(array1.every(num => num < 6));
// output: true

16. 判斷陣列元素是否有任一個通過函式設定的條件,會回傳true or false - some(function(){})

範例:

let array1 = [1, 2, 3, 4, 5];

console.log(array1.some(num => num < 2));
// output: true

17. 判斷陣列是否包含特定的元素,並以此來回傳 true 或 false - includes()

範例:

let array1 = [1, 2, 3, 4, 5];

console.log(array1.includes(6));
// output: false

以下的函式除了能用在陣列,也可以用在字串喔~

18. 找尋符合的字串/陣列元素位置 - str.indexOf(searchValue, fromIndex)

第一個參數是要找的值,第二個參數是要從哪個陣列位置開始找起
範例:

let array1 = ['harry', 'jerry', 'tom', 'john', 'kitty'];

console.log(array1.indexOf('john', 2));
// output: 3

19. 取出字串/陣列的一部分 - slice(indexStart, indexEnd)

第一個參數是要第一個取出的元素位置,第二個參數是至哪一個索引之前停止提取
範例:

let array1 = ['harry', 'jerry', 'tom', 'john', 'kitty'];
array1 = array1.slice(1, 3); // 取到索引2的值,第二個參數為3
console.log(array1);
// output: ['jerry', 'tom']

20. 迴圈 - for…of

用於陣列,字串
範例:

let array1 = [1, 2, 3];

for (let value of array1) {
    value += 1;
    console.log(value);
}
// 2
// 3
// 4

好了,終於把陣列的20個函式寫在這篇文章了,希望對看文章的你有幫助。明天,將來介紹二維陣列並利用二維陣列計算踩地雷中某個數周圍地雷的數量。/images/emoticon/emoticon01.gif


上一篇
Day1-來介紹一下資料結構和演算法吧!
下一篇
Day3-二維陣列與數地雷應用
系列文
使用JavaScript學習資料結構與演算法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ㄚ淳淳
iT邦新手 4 級 ‧ 2023-01-13 11:33:49
  1. 回傳第一個滿足所提供之測試函式的元素值 - find

let array1 = [2, 1, 5, 3, 4];
let found = array1.find((element) => element > 4);

console.log(found);
// expected output: 12

output 是不是有誤,應該為5呢~

harry xie iT邦研究生 1 級 ‧ 2023-01-13 12:19:45 檢舉

我那邊的確寫錯了~感謝妳的通知/images/emoticon/emoticon12.gif

我要留言

立即登入留言